<template>
	<view class="container">
		<!-- 订单商品 -->
		<view class="goods" v-for="(item, index) in orderData.order_goods">
			<image class="goodsImg" :src="item.goods_image" mode=""></image>
			<view class="goodsMsg">
				<view class="goods_name">{{ item.goods_name }}</view>
				<view class="goods_spec"><text v-if="item.sku_id">{{ item.sku_name }}</text><text>数量: {{ item.buy_num }}</text></view>
			</view>
		</view>
		<!-- 退款/货 -->
		<view class="return">
			<view class="item" @click="goReturn(0)">
				<view class="item_pic"><image src="https://community.chuangxiangdianli.com/images/order/huanhuo.png" mode=""></image></view>
				<view class="item_msg">
					<view>仅退款</view>
					<view>未收到货物（包含已签收）</view>
				</view>
				<view class="back">
					<image src="https://community.chuangxiangdianli.com/images/order/tui_arrow.png" mode=""></image>
				</view>
			</view>
			<view class="item" @click="goReturn(1)">
				<view class="item_pic"><image src="https://community.chuangxiangdianli.com/images/order/tuihuo.png" mode=""></image></view>
				<view class="item_msg">
					<view>退货退款</view>
					<view>已收到货，需要退已收到的货物</view>
				</view>
				<view class="back">
					<image src="https://community.chuangxiangdianli.com/images/order/tui_arrow.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				orderId: '',  // 订单id
				orderData: {}, // 售后数据
				
			}
		},
		onLoad(option) {
			if (option.orderId) {
				this.orderId = option.orderId
				this.refundBefore()
			}
		},
		methods: {
			// 请求数据
			refundBefore() {
				let that = this
				that.$mrequest({
					url: 'Mini/refund/refund_before',
					method: 'POST',
					data: {
						order_id: that.orderId
					},
					callBack: function callBack (res) {
						console.log('请求成功！', res);
						if (res.status) {
							that.orderData = res.data
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						console.log('请求失败！', res);
					}
				})
			},
			// 跳转退款(0)/退货(1)
			goReturn(num) {
				uni.navigateTo({
					url: './returnRequest?num=' + num + '&orderId=' + this.orderId
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: rgba(239, 240, 247, 1);
	}
	.goods{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		background-color: #fff;
		width: 100%;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 10rpx;
		box-sizing: border-box;
		.goodsImg{
			display: block;
			height: 110rpx;
			width: 110rpx;
		}
		.goodsMsg{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 51rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			.goods_spec{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				&>text:nth-child(1){
					margin-right: 30rpx;
				}
			}
		}
	}
	.return{
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 15rpx;
		.item{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			height: 145rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			.item_pic{
				height: 52rpx;
				width: 52rpx;
				&>image{
					display: block;
					height: 100%;
					width: 100%;
				}
			}
			.item_msg{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 30rpx;
				
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				
				&>view:nth-child(2){
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
			.back{
				height: 21rpx;
				width: 21rpx;
				&>image{
					display: block;
					height: 100%;
					width: 100%;
				}
			}
		}
		
	}

</style>
